<template>
	<view class="container">
		<view class="historicalAccess">
			<view class="titleText">历史访问</view>
			<view class="historView uni-flex">
				<view class="historyRecode">省本级</view>
				<view class="historyRecode">长沙市</view>
				<view class="historyRecode">岳阳市</view>
			</view>
		</view>
		<view class="cutLine"></view>
		<view class="dingweiMain">
			<view class="swiperHead">
				  <view class="swiperItem" :class="{swpHeadActiv:currentTabIndex===index}" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" @click="CurrentTab(index)">
					<text class="swipText"> {{tab.name}}</text> <text class="swiperLine"></text>
				  </view>
			</view>
			<view class="areaView uni-flex">
				<view class="areaName" v-for="(areaItem,index) in areaList">{{areaItem}}</view>
			</view>
			<xsq></xsq>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
				  id: "tab01",
				  name: '省级',
				  statistical: '1'
				}, {
				  id: "tab02",
				  name: '市州级',
				  statistical: '2'
				}, {
				  id: "tab03",
				  name: '县市区',
				  statistical: '3'
				}],
				currentTabIndex:0,
				areaList:["全部","长沙市","株洲市","湘潭市","益阳市","常德市","岳阳市","永州市","郴州市","衡阳市"]
			}
		},
		methods: {
			CurrentTab(index){
				this.currentTabIndex = index;
			}
		}
	}
</script>

<style>
	@import "uni.css";
	.container{
		width: 100%;
	}
	.historicalAccess{
		width: 100%;
		height: 113px;
		padding: 20px;
		box-sizing: border-box;
	}
	.titleText{
		color: #0B121A;
		font-size: 18px;
	}
	.historView{
		width: 100%;
		margin-top: 10px;
	}
	.historyRecode{
		width: 100px;
		height: 34px;
		line-height: 34px;
		background-color: #EDEDED;
		color:#28435D ;
		font-size: 14px;
		text-align: center;
		border-radius: 5px;
	}
	.historyRecode:nth-child(3n+2){
		margin: 0 17px;
	}	
	.cutLine{
		width: 100%;
		height: 10px;
		background-color: #F5F6F7;
	}
	.dingweiMain{
		width: 100%;
	}
	.swiperHead{
		width: 100%;
		height: 44px;
		display: flex;
		line-height: 44px;
		/* border-bottom: solid #E5E5E5 10px; */
	}
	.container{
		width: 100%;
	}
	.swiperItem{
		width: 33.3%;
		text-align: center;
		font-size: 36rpx;
		position: relative;
		color: #B7B7B7;
	}
	  /* page {
	    width: 100%;
	    min-height: 100%;
	    display: flex;
	  } */
	  .swpHeadActiv .swipText{
		  color: #2A2A2A;
	  }
	.swiperLine{
		width: 26px;
		height: 4px;
		border-radius: 25px;
		background-color: #27A9FF;
		position: absolute;
		bottom: 0;
		left: 50px;
		display: none;
	}
	.swpHeadActiv .swiperLine{
		display: block;
	}
	.areaView{
		width: 100%;
		padding: 15px 20px;
		box-sizing: border-box;
		/* display: flex; */
		flex-direction: row;
		flex-wrap: wrap;
	}
	.areaName{
		width: 100px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		border: solid #EDEDED 1px;
		color: #28435D;
		font-size: 14px;
		margin-bottom: 10px;
	}
	.areaName:nth-child(3n+2){
		margin: 0 17px;
	}
</style>
